<template>
  <div calss="navbar">
  <v-app-bar app>
    <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>

    <v-toolbar-title>临菲信息技术港</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
      <v-btn to="/login" text>登录</v-btn>
      <v-btn to="register" text>注册</v-btn>
    </v-toolbar-items>
  </v-app-bar>

  <v-navigation-drawer
      v-model="drawer"
      fixed
      temporary
  >

    <v-list
        nav
        dense
    >
      <v-list-item-group
          v-model="group"
          active-class="deep-purple--text text--accent-4"
      >
        <v-list-item v-for="(item, key) in head_items" :key="key" :to=item.to>
          <v-list-item-icon>
            <v-icon>{{item.icon}}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{item.title}}</v-list-item-title>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
  </div>
</template>

<script>
export default {
name: "NavBar",
  data:()=>({
    drawer: false,
    head_items: [
      { title: '网站首页', icon: 'mdi-view-dashboard', to:'/'},
      { title: '无线通信', icon: 'mdi-view-dashboard', to:'/wireless'},
      { title: '计算机与软件', icon: 'mdi-image',to:'/computer'},
      { title: '人工智能', icon: 'mdi-help-box',to:'/intelligence'},
      { title: '科普信息', icon: 'mdi-help-box',to:'/information'},
      { title: '招考留学', icon: 'mdi-help-box',to:'/test_and_job'},
      { title: '临菲学堂', icon: 'mdi-help-box',to:'/school'},
      { title: '专业社区', icon: 'mdi-help-box',to:'/technical'},
      { title: '定制服务', icon: 'mdi-help-box',to:'/custom'},
      { title: '关于我们', icon: 'mdi-help-box', to:'/about'},
    ],
  }),

}
</script>

<style scoped>

</style>
